<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/simpleCart.min.js"></script>
</head>
<body>

	<!--header-->
	<jsp:include page="/header.jsp">
		<jsp:param name="flag" value="10"></jsp:param>
	</jsp:include>
	<!--//header-->


	<!--account-->
	<div class="account">
		<div class="container">
			<div class="register">
				<c:if test="${!empty msg }">
					<div class="alert alert-danger">${msg }</div>
				</c:if>
				<form action="/user_rigister" method="post" id="registerform">
					<div class="register-top-grid">
						<h3>注册新用户</h3>
						<div class="input">
							<span>用户名 <label style="color: red;">*</label></span> <input
								type="text" name="username" placeholder="请输入用户名"
								required="required" color="red">
						</div>
						<div class="input">
							<span>邮箱 <label style="color: red;">*</label></span> <input
								type="text" name="email" placeholder="请输入邮箱" required="required">
						</div>
						<div class="input">
							<span>密码 <label style="color: red;">*</label></span> <input
								type="password" name="password" placeholder="请输入密码"
								required="required">
						</div>
						<div class="input">
							<span>收货人<label></label></span> <input type="text" name="name"
								placeholder="请输入收货">
						</div>
						<div class="input">
							<span>收货电话<label></label></span> <input type="text" name="phone"
								placeholder="请输入收货电话">
						</div>
						<div class="input">
							<span>收货地址<label></label></span> <input type="text"
								name="address" placeholder="请输入收货地址">
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="register-but text-center">
						<input type="submit" value="提交">
						<div class="clearfix"></div>
					</div>
				</form>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//account-->

	<!--footer-->
	<jsp:include page="/footer.jsp"></jsp:include>
	<!--//footer-->
	<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	<script>
		jQuery.validator.addMethod("isPhone", function(value, element) {
			var tel = /^[0-9]{6}$/;
			return this.optional(element) || (tel.test(value));
		}, "请正确填写您的6位手机号码");

		$().ready(function() {
			// 在键盘按下并释放及提交后验证提交表单
			$("#registerform").validate({
				rules: {
					username : {
						required : true,
						minlength : 2
					},
					password : {
						required : true,
						minlength : 5
					},
					confirm_password : {
						required : true,
						minlength : 5,
						equalTo : "#password"
					},
					email : {
						required : true,
						email : true
					},
					phone : {
						required : true,
						isPhone : true
					}
				},
				messages : {
					username : {
						required : "请输入用户名",
						minlength : "用户名必需由两个字符组成"
					},
					password : {
						required : "请输入密码",
						minlength : "密码长度不能小于 5 个字符"
					},
					confirm_password : {
						required : "请输入密码",
						minlength : "密码长度不能小于 5 个字符",
						equalTo : "两次密码输入不一致"
					},
					email : "请输入一个正确的邮箱",
					phone : "请输入一个正确的手机号码"
				}
			})
		});
	</script>

</body>
</html>